<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苗情灾情监测系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <main class="dashboard-container main-container">
        <!-- 概览卡片区域 -->
        <div class="overview-section">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-seedling"></i>
                </div>
                <div class="stat-content">
                    <h3>监测区域</h3>
                    <div class="stat-value">12,450 亩</div>
                    <div class="stat-trend positive">
                        <i class="fas fa-arrow-up"></i> 较上月增长 2.3%
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon warning">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="stat-content">
                    <h3>预警信息</h3>
                    <div class="stat-value">3 条</div>
                    <div class="stat-trend negative">
                        <i class="fas fa-arrow-down"></i> 较上月减少 5条
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-video"></i>
                </div>
                <div class="stat-content">
                    <h3>在线设备</h3>
                    <div class="stat-value">24/25</div>
                    <div class="stat-text">设备在线率 96%</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-cloud-sun"></i>
                </div>
                <div class="stat-content">
                    <h3>天气状况</h3>
                    <div class="stat-value">25°C</div>
                    <div class="stat-text">晴朗 / 适宜生长</div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 左侧图表区域 -->
            <div class="charts-section">
                <div class="chart-card">
                    <div class="card-header">
                        <h3>作物生长趋势</h3>
                        <div class="card-actions">
                            <button class="btn-action" data-range="week">周</button>
                            <button class="btn-action active" data-range="month">月</button>
                            <button class="btn-action" data-range="year">年</button>
                        </div>
                    </div>
                    <div id="growthTrendChart" class="chart"></div>
                </div>
                <div class="chart-card">
                    <div class="card-header">
                        <h3>灾情分布</h3>
                        <select class="time-range">
                            <option>近30天</option>
                            <option>近90天</option>
                            <option>近半年</option>
                        </select>
                    </div>
                    <div id="disasterDistributionChart" class="chart"></div>
                </div>
            </div>

            <!-- 右侧信息面板 -->
            <div class="info-panel">
                <!-- 实时预警 -->
                <div class="panel-card">
                    <h3>实时预警 <span class="badge"></span></h3>
                    <div class="alert-list">
                        <div class="alert-item high">
                            <div class="alert-icon">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div class="alert-content">
                                <h4>病虫害预警</h4>
                                <p>A区域发现稻飞虱，建议及时处理</p>
                                <span class="alert-time">10分钟前</span>
                            </div>
                            <button class="btn-handle">处理</button>
                        </div>
                        <!-- 更多预警项 -->
                    </div>
                </div>

                <!-- 监控点状态 -->
                <div class="panel-card">
                    <h3>监控点状态</h3>
                    <div class="monitor-list">
                        <div class="monitor-item">
                            <span class="status online"></span>
                            <span class="name">A-1 水稻田东</span>
                            <span class="data">正常运行</span>
                            <button class="btn-view">查看</button>
                        </div>
                        <div class="monitor-item">
                            <span class="status online"></span>
                            <span class="name">A-2 水稻田西</span>
                            <span class="data">正常运行</span>
                            <button class="btn-view">查看</button>
                        </div>
                        <div class="monitor-item">
                            <span class="status offline"></span>
                            <span class="name">B-1 小麦田北</span>
                            <span class="data">信号弱</span>
                            <button class="btn-view">查看</button>
                        </div>
                        <div class="monitor-item">
                            <span class="status online"></span>
                            <span class="name">B-2 小麦田中</span>
                            <span class="data">正常运行</span>
                            <button class="btn-view">查看</button>
                        </div>
                        <div class="monitor-item">
                            <span class="status online"></span>
                            <span class="name">B-3 小麦田南</span>
                            <span class="data">正常运行</span>
                            <button class="btn-view">查看</button>
                        </div>
                        <div class="monitor-item">
                            <span class="status online"></span>
                            <span class="name">C-1 玉米地东</span>
                            <span class="data">正常运行</span>
                            <button class="btn-view">查看</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/components/navbar.js"></script>
    <script src="js/main.js"></script>
    <script src="js/dashboard.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            Navbar.init();
        });
    </script>
</body>
</html> 